<template>
  <!-- 
    基本用法：https://nuxt.com/modules/swiper
    详细用法：https://swiperjs.com/vue

    modules 选择要加载轮播图的功能
      SwiperAutoplay 自动轮播
    loop 是否循环轮播
    autoplay 自动轮播的配置
   -->
  <Swiper
    :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
    :loop="true"
    :autoplay="{
      delay: 3000,
      disableOnInteraction: false,
    }"
    :pagination="{ clickable: true }"
    navigation
  >
    <SwiperSlide v-for="banner in bannerList" :key="banner.id">
      <img :src="banner.imageUrl" />
    </SwiperSlide>
  </Swiper>
</template>

<script lang="ts" setup>
defineProps<{
  bannerList: any;
}>();
</script>

<style scoped lang="scss"></style>
